<template>
  <div>
    <div><h3 class="text-primary">京东热卖</h3></div>

    <div class="my-3 p-3 bg-body rounded shadow-sm">
      <div
        class="d-flex text-muted pt-3"
        v-for="index in range(start, end)"
        :key="index"
      >
        <svg
          class="bd-placeholder-img flex-shrink-0 me-2 rounded"
          width="32"
          height="32"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="Placeholder: 32x32"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
        >
          <rect width="100%" height="100%" fill="#1E95D4" />
          <text x="50%" y="50%" fill="#1E95D4" dy=".3em">32x32</text>
        </svg>

        <div class="pb-3 mb-0 small lh-sm border-bottom w-100 row">
          <strong class="d-block text-gray-dark">
            <a class="col-lg-6" :href="url[index]">{{
              product[index]
            }}</a></strong
          >
          <p class="col-lg-6">{{ promote[index] }}</p>
          <div class="col-lg-2">价格：{{ price[index] }}￥</div>
          <div class="col-lg-2">品牌：{{ brand[index] }}</div>
          <div class="col-lg-2">产地：{{ origin[index] }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-5"></div>
        <div class="col-lg-1">
          <h5>
            <button class="badge bg-secondary" v-on:click="pageReduce()">
              上一页
            </button>
          </h5>
        </div>
        <div class="col-lg-1">
          <h5>
            <button class="badge bg-secondary" v-on:click="pageAdd()">
              下一页
            </button>
          </h5>
        </div>
        <div class="col-lg-5"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: [],
      price: [],
      promote: [],
      origin: [],
      brand: [],
      url: [],
      start: 0,
      end: 0,
      begin: 0,
      part: 0,
      pageNum: 8,
      dataLength: 0,
    };
  },
  mounted() {
    this.axios
      .get("http://122.51.157.58:8081/api-service/getJingDongProducts?key=123456")
      .then((body) => {
        var result = body.data;
        this.dataLength = result.data.result.length;

        for (var i = 0; i < result.data.result.length; i++) {
          this.product.push(result.data.result[i].productName);
          this.price.push(result.data.result[i].productPrice);
          this.promote.push(result.data.result[i].productPromote);
          this.origin.push(result.data.result[i].productOrigin);
          this.brand.push(result.data.result[i].productBrand);
          this.url.push(result.data.result[i].urlLink);
        }
        this.part = Math.floor(result.data.result.length / this.pageNum);
        if (this.part == 0) {
          this.end = this.data.length;
        } else {
          this.end = this.pageNum;
        }
      });
  },
  methods: {
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
    pageAdd() {
      var gap = this.dataLength - this.end;
      if (gap >= this.pageNum) {
        this.start += this.pageNum;
        this.end += this.pageNum;
      } else if (this.end != this.dataLength) {
        this.start += this.pageNum;
        this.end = this.dataLength;
      }
    },
    pageReduce() {
      if (this.end == this.dataLength) {
        this.start -= this.pageNum;
        this.end = this.part * this.pageNum;
      } else if (this.start != 0) {
        this.start -= this.pageNum;
        this.end -= this.pageNum;
      }
    },
  },
};
</script>

<style scoped>
@import url("../../../static/css/offcanvas.css");
</style>
